<!-- 商品搜索 -->
<template>
	<view class="container">
		<view class="tui-searchbox margin-lr">
			<view class="tui-search-input">
				<icon type="search" :size="13" color="#333"></icon>
				<input placeholder-class="tui-input-plholder" class="tui-input" confirm-type="search"
					:adjust-position="true" placeholder="请输入" @input="inputChange" />
				<icon type="clear" :size="13" color="#bcbcbc" @click.stop="clear"></icon>
			</view>
			<view class="tui-cancle" @tap="doSearch(keyword)">搜索</view>
		</view>

		<!--  -->
		<view class="search-keyword">
			<!-- 历史搜索 -->
			<scroll-view scroll-y>
				<view class="margin-lr">
					<view class="tui-history-header">
						<view class="tui-search-title">历史搜索</view>
						<view class="tui-icon-delete" @tap="oldDelete">删除</view>
					</view>
					<view class="tui-history-content">
						<view v-for="(keyword, index) in 5" @tap="doSearch(keyword)" :key="index"
							class="tui-circle round">{{ keyword }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!--  @scroll="scroll" 商品列表 -->
		<view>
			<scroll-view scroll-y class="goodscom" :style="{ height: 500 + 'px' }">
				<view ref="foodsWrapper" class="padding-bottom">
					<view class="food u-f-ajc" v-for="(food, index) in 10" :key="index">
						<image src="../../../static/goods/4.jpg" class="pic radius" mode="aspectFill"></image>
						<view class="food-info">
							<text class="title">产品名称</text>
							<text class="del">
								<text>销量99+</text>
								<text class="productStock" v-if="1 == 1">仅剩55件</text>
								<text class="productStock" v-if="1 != 1">暂时缺货</text>
							</text>

							<!-- 加减 -->
							<view class="food-btm">
								<view class="spec" v-if="false">
									<text class="food-price">￥8</text>
									<text class="line-through">￥9</text>
								</view>
								<view class="spec" v-else>
									<text class="food-price">￥10</text>
								</view>
								<view v-else>
									<cartcontrol :discount="mydiscount" :food="food.map" @add="addCart"
										@dec="decreaseCart"></cartcontrol>
									<view class="text-cut round">选规格</view>
									<view v-show="food.map.count > 0 && food.map.skuOneName" class="count">
										{{ food.map.count }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/images/my-img/img_nodata.png" v-if="false" :fixed="true">暂无内容</tui-no-data>
			<!-- <shopcart :goods="carList" :discount="mydiscount" @goorder="getorder" @goorderqr="geqrdd" @add="addCart" @dec="decreaseCart" @delAll="delAll" :rightshow="false"></shopcart> -->
		</view>
		<!-- 选择规格弹窗start -->
		<view>
		<!-- <tui-modal :show="modalSpec" @cancel="hideSpec" :custom="true" padding="20upx 0 0"> -->
			<view class="tui-modal-spec">
				<view class="u-f-ajc title">请选择商品规格</view>
				<view class="spec">
					<image class="specImg" src="../../../static/goods/4.jpg"></image>
				</view>
				<view class="spec">
					<view class="sub">规格</view>
					<view class="u-f-ac">
						<view class="spec-item" v-for="(item, index) in 10" :key="index" @tap="clickone(index, item)">{{ item }}</view>
					</view>
				</view>
				<view class="spec" v-if="true">
					<view class="sub">规格</view>
					<view class="u-f-ac">
						<view class="spec-item" v-for="(item, index) in 10" :key="index"@t p="clicktwo(index, item)">{{ item }}</view>
					</view>
				</view>
				<view class="foot-btm u-f-jsb">
					<view class="foot-left u-f-ac">
						<text class="price">￥15</text>
						<text class="productStock ml0" v-if="true">（仅剩16件）</text>
						<text class="productStock ml0" v-if="false">暂时缺货</text>
					</view>
					<!-- <cartcontrol :food="checkSku" @add="addCart" @dec="decreaseCart" v-if="true"></cartcontrol> -->
					<view class="btn round">加入购物车</view>
				</view>
			</view>
			<view class="close-btn u-f-ajc"><text class="icon iconfont iconcuo"></text></view>
		<!-- </tui-modal> -->
		</view>
	</view>
</template>

<script>
	
</script>

<style scoped lang='scss'>
	.search-wrap{
		padding-left: 24rpx;
		height: 100rpx;
		
		.icon-sousuo{
			padding: 0 12rpx 0 20rpx;
			font-size: 40rpx;
			color: #999;
		}
		.input-box {
			width: 604rpx;
			height: 80rpx;
			border-radius: 100rpx;
			background: #f5f6f7;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}
		.icon-guanbi2{
			padding: 10rpx 20rpx;
			font-size: 32rpx;
			color: #999;
		}
		.search-btn {
			flex-shrink: 0;
			padding: 0 24rpx 0 20rpx;
			font-size: 32rpx;
			color: #007aff;
		}
	}
	.content {
		flex: 1;
		padding-top: 24rpx;
		border-radius: 28rpx 28rpx 0 0;
		background-color: #fff;
	}
	.s-header{
		height: 80rpx;
		padding: 0 32rpx 0 40rpx;
		
		.tit{
			flex: 1;
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
		}
		.icon-lajitong{
			padding: 10rpx;
			font-size: 36rpx;
			color: #333;
		}
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0 0 36rpx;
		
		.item{
			min-width: 60rpx;
			height: 58rpx;
			padding: 0 24rpx;
			margin: 0 24rpx 24rpx 0;
			border-radius: 100rpx;
			background-color: #f5f6f7;
			font-size: 26rpx;
			color: #666;
		}
	}
</style>
